<template>
  <div id="app">
    <router-view v-wechat-title='$route.meta.title'/>
<!--    <router-view v-wechat-title='$route.meta.title'/>-->
    <!--<img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  /*components: {
    HelloWorld
  }*/
  data(){
    return{
      show:true
    }
  },
  mounted() {
    let user_id = sessionStorage.getItem('userID');
    let userSig = sessionStorage.getItem('userSig');
    if(user_id){
      this.tim.login({
        userID: user_id,
        userSig: userSig
      }).then(() => {
        this.$store.commit('toggleIsLogin', true);
        this.$store.commit('startComputeCurrent');
        console.log('im登陆成功');
      }).catch(error => {
        this.$store.commit('showMessage', {
          message: '登录失败：' + error.message,
          type: 'error'
        })
      });
      this.initListener()
    }

  },
  methods:{
    initListener() {
      // 登录成功后会触发 SDK_READY 事件，该事件触发后，可正常使用 SDK 接口
      this.tim.on(this.TIM.EVENT.SDK_READY, this.onReadyStateUpdate, this)
      // SDK NOT READT
      this.tim.on(this.TIM.EVENT.SDK_NOT_READY, this.onReadyStateUpdate, this)
      // 被踢出
      this.tim.on(this.TIM.EVENT.KICKED_OUT, () => {
        this.$store.commit('showMessage', {
          message: '被踢出，请重新登录。',
          type: 'error'
        })
        this.$store.commit('toggleIsLogin', false)
        this.$store.commit('reset')
      })
      // SDK内部出错
      this.tim.on(this.TIM.EVENT.ERROR, this.onError)
      // 收到新消息
      this.tim.on(this.TIM.EVENT.MESSAGE_RECEIVED, this.onReceiveMessage)
      // 会话列表更新
      this.tim.on(this.TIM.EVENT.CONVERSATION_LIST_UPDATED, event => {
        this.$store.commit('updateConversationList', event.data)
      })
    },
    onReceiveMessage({ data: messageList }) {
      console.log('aaa');
      // this.show = false
      this.handleAt(messageList);
      this.$store.commit('pushCurrentMessageList', messageList)
    },
    onError({ data }) {
      if (data.message !== 'Network Error') {
        this.$store.commit('showMessage', {
          message: data.message,
          type: 'error'
        })
      }
    },
    onReadyStateUpdate({ name }) {
      const isSDKReady = name === this.TIM.EVENT.SDK_READY ? true : false
      this.$store.commit('toggleIsSDKReady', isSDKReady)

      if (isSDKReady) {
        this.tim.getMyProfile().then(({ data }) => {
          this.$store.commit('updateCurrentUserProfile', data)
        })
        // this.$store.dispatch('getBlacklist')
      }
    },
    handleAt(messageList) {
      // 筛选有 @ 符号的文本消息
      const atTextMessageList = messageList.filter(
              message => message.type === this.TIM.TYPES.MSG_TEXT && message.payload.text.includes('@')
      )
      for (let i = 0; i < atTextMessageList.length; i++) {
        const message = atTextMessageList[i]
        const matched = message.payload.text.match(/@\w+/g)
        if (!matched) {
          continue
        }
        // @ 我的
        if (matched.includes(`@${this.currentUserProfile.userID}`)) {
          // 当前页面不可见时，调用window.Notification接口，系统级别通知。
          // if (document.hidden) {
          //   this.notifyMe(message)
          // }
          // Notification({
          //   title: `有人在群${message.conversationID.slice(5)}提到了你`,
          //   message: message.payload.text,
          //   duration: 3000
          // })
          this.$bus.$emit('new-messsage-at-me', {
            data: { conversationID: message.conversationID }
          })
        }
      }
    },
  }
}
</script>

<style lang="stylus">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  overflow-x: hidden;
}
  .emojiwrap
    .emojis
      img
        width:30px

</style>
